import { formatEnumForSelect } from '@/views/enum/common';
import { IFormConfig, IFormData, IFormItemConfig, IJlFormInstance } from '@jl/element-plus';
import { ref } from 'vue';
import { GetProListByMuCond } from '@/api/project';
import { useRequest } from '@jl/common/composable';

const { run: proListRun, data: proData } = useRequest<any, any>(GetProListByMuCond, []);

const proListData = computed(() => {
  return proData.value.list || [];
});

export function useForm() {
  const formRef = ref<IJlFormInstance>();
  const formConfig: IFormConfig = { gutter: 24, labelWidth: 90 };
  const formData = ref<IFormData>({
    activityName: '',
    projectId: '',
    actDesp: '',
  });

  const formItemConfig = ref<IFormItemConfig>([
    {
      type: 'input',
      key: 'activityName',
      label: '场景名称',
      span: 24,
      maxLength: '50',
      placeholder: '请输入场景名称',
      emits: new Set(['change']),
      rules: [
        {
          required: true,
          message: '请输入场景名称',
        },
      ],
    },
    {
      type: 'select',
      key: 'projectId',
      label: '所属项目',
      span: 24,
      placeholder: '请选择',
      emits: new Set(['change']),
      options: [],
      // rules: [
      //   {
      //     required: true,
      //     message: '请选择项目',
      //   },
      // ],
    },
    {
      type: 'textarea',
      maxLength: '200',
      key: 'actDesp',
      label: '场景描述',
      placeholder: '简述场景描述，最多支持200个字符',
      span: 24,
    },
    {
      type: 'slot',
      slotName: 'coverSlot',
      key: 'actCover',
      label: '场景封面',
      span: 24,
    },
  ]);

  watch(
    () => proListData.value,
    () => {
      formItemConfig.value[1].options = proListData.value.map((item: any) => {
        return {
          label: item.projectName,
          value: item.projectId,
        };
      });
    },
    {
      deep: true,
    }
  );

  return {
    formRef,
    formConfig,
    formData,
    formItemConfig,
    proListRun,
  };
}
